<!DOCTYPE html>
<!-- saved from url=(0120)https://ptteng.github.io/WEB/ppt/MENGXIN%E4%BB%80%E4%B9%88%E6%98%AF%E8%87%AA%E6%89%A7%E8%A1%8C%E5%87%BD%E6%95%B0.html#/1 -->
<html class=" js no-mobile desktop no-ie chrome chrome62 web-section ppt-section gradient rgba opacity textshadow multiplebgs boxshadow borderimage borderradius cssreflections csstransforms csstransitions no-touch no-retina fontface domloaded w-1366 gt-240 gt-320 gt-480 gt-640 gt-768 gt-800 gt-1024 gt-1280 lt-1440 lt-1680 lt-1920 no-portrait landscape" id="mengxin%e4%bb%80%e4%b9%88%e6%98%af%e8%87%aa%e6%89%a7%e8%a1%8c%e5%87%bd%e6%95%b0-page"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <title>葡萄藤PPT</title>

    <link rel="stylesheet" href="./葡萄藤PPT_files/reveal.css">

    <!-- PPT主题，可以在/css/reveal/theme/中选择其他主题，目前暂时只能使用该模板 -->
    <link rel="stylesheet" href="./葡萄藤PPT_files/ptt.css">

    <!-- syntax highlighting 代码高亮主题 -->
    <link rel="stylesheet" href="./葡萄藤PPT_files/zenburn.css">

    <!-- 打印和PDF输出样式 -->
    <script>
        var link = document.createElement('link');
        link.rel = 'stylesheet';
        link.type = 'text/css';
        link.href = window.location.search.match(/print-pdf/gi) ? '../css/reveal/print/pdf.css' : '../css/reveal/print/paper.css';
        document.getElementsByTagName('head')[0].appendChild(link);
    </script><link rel="stylesheet" type="text/css" href="./葡萄藤PPT_files/paper.css"><script type="text/javascript" src="./葡萄藤PPT_files/marked.js.下载"></script><script type="text/javascript" src="./葡萄藤PPT_files/markdown.js.下载"></script><script type="text/javascript" src="./葡萄藤PPT_files/notes.js.下载"></script><script type="text/javascript" src="./葡萄藤PPT_files/highlight.js.下载"></script>
</head>
<body>
<img src="./葡萄藤PPT_files/logo.png" alt="" usemap="#pttmap" class="base-logo">
<map name="pttmap">
    <area shape="rect" coords="0,0,276,58" href="http://www.jnshu.com/" alt="" target="_blank">
</map>
<div class="reveal slide center" role="application" data-transition-speed="default" data-background-transition="fade">
    <div class="slides" style="width: 960px; height: 700px; left: 50%; top: 50%; bottom: auto; right: auto; transform: translate(-50%, -50%) scale(0.768857);">
        <section class="past" style="top: 178.5px; display: block;" hidden="" aria-hidden="true">
            <h2>成都分院</h2>
            <h3>【js-02】什么是自执行函数？</h3>
            <p>分享人 李劲宏</p>
        </section>
        <section class="present" style="top: 3px; display: block;">
            <p>目录</p>
            <p>1.背景介绍</p>
            <p>2.知识剖析</p>
            <p>3.常见问题</p>
            <p>4.解决方案</p>
            <p>5.编码实战</p>
            <p>6.扩展思考</p>
            <p>7.参考文献</p>
            <p>8.更多讨论</p>
        </section>
        <section class="future" style="top: 267px; display: block;" hidden="" aria-hidden="true">
            <h3>1.背景介绍</h3>
        </section>
        <section class="future" style="top: 142px; display: block;" hidden="" aria-hidden="true">
            <p>
                今天的主题是自执行函数。什么是自执行函数？
                今天主要就自执行函数的一些基本概念和用法进行简要分享。
            </p>
            <p>
                什么是自执行函数？网上对这种类型的函数的叫法众说纷纭。
                有的人说是立即调用函数，有的人说自动执行函数，并没有一个清晰的概念。
                叫它为“自执行”函数也行，称呼为“立即调用的函数表达式”也可以。
            </p>
        </section>
        <section class="future" style="top: 267px; display: none;" hidden="" aria-hidden="true">
            <h3>2.知识剖析</h3>
        </section>
        <section class="stack future" style="top: 0px; display: none;" data-previous-indexv="4" hidden="" aria-hidden="true">
            <section class="past" style="top: 188px; display: none;" hidden="" aria-hidden="true">
                <p>知识点1：什么是函数</p>
                <p>W3school 对 JavaScript函数的定义是：
                    函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。
                    函数能接受输入的参数，不同的参数会返回不同的值。</p>
            </section>
            <section class="past" style="top: 110.5px; display: none;" hidden="" aria-hidden="true">
                <p>知识点2：创建函数的几种方法</p>
                <h6>函数的声明</h6>
                <p>
                    使用function命令声明的函数叫函数的声明。
                    function命令后面是函数名，函数名后面是一对圆括号，
                    里面是传入函数的参数。函数体放在大括号里面。
                    函数声明后不会立即执行，会在我们需要的时候调用到。
                    如下例子：<br>
                    function print(s) {
                    console.log(s);
                    }
                </p>
            </section>
            <section class="past" style="top: 130.5px; display: none;" hidden="" aria-hidden="true">
                <h6>函数表达式</h6>
                <p>
                    JavaScript 函数可以通过一个表达式定义。函数表达式存储在变量中.如：var x = function (a, b) {return a * b};<br>
                    在函数表达式存储在变量后，变量也可作为一个函数使用。这种形式的函数实际上是一个 匿名函数 (函数没有名称)。
                    函数存储在变量中，通过变量名来调用。函数需要以分号结尾，因为它是一个执行语句。
                </p>
            </section>
            <section class="past" style="top: 222.5px; display: none;" hidden="" aria-hidden="true">
                <h6>Function() 构造函数</h6>
                <p>
                    函数通过内置的 JavaScript 函数构造器（Function()）定义： var myFunction = new Function("a", "b", "return a * b");
                </p>
            </section>

            <section style="text-align: left; top: 94.5px; display: none;" class="" aria-hidden="true">
                <h6>知识点2：自执行函数</h6>
                自执行函数，可以让函数在定义后立即被执行.
                主要用于创建一个新的作用域，在此作用域内声明的变量，
                不会和其它作用域内的变量冲突或混淆，
                大多是以匿名函数方式存在，且立即自动执行。语法形如：<br>
                (function( ){
                console.log("test");
                })( );
                <br> 或者

                (function( ){
                console.log("test");
                }( ));
                <br>还有一些流行的jQuery库：

                (function( window, undefined ) {
                // code here
                }) ( window );
            </section>
        </section>

        <section class="future" style="top: 267px; display: none;" hidden="" aria-hidden="true">
            <h3>3.常见问题</h3>
        </section>
        <section class="future" style="top: 267px; display: none;" hidden="" aria-hidden="true">
            <p>如何使用自执行函数</p>
        </section>
        <section class="future" style="top: 267px; display: none;" hidden="" aria-hidden="true">
            <h3>4.解决方案</h3>
        </section>
        <section class="future" style="top: 183.5px; display: none;" hidden="" aria-hidden="true">
            1.对于函数表达式，在后面加括号即可以让函数立即执行；例如下面这个函数 <br>
            <img src="./葡萄藤PPT_files/6023043-67b3919e4894ea73.png" alt="">
        </section>
        <section class="future" style="top: 177px; display: none;" hidden="" aria-hidden="true">
            <p>
                2但是对于下面这个函数，如果直接加()就会报错；
                <img src="./葡萄藤PPT_files/6023043-cd384219040d3929.png" alt="">
        </p></section>
        <section class="future" style="top: 0px; display: none;" hidden="" aria-hidden="true">
            <p>如何让这种匿名函数直接执行，这就用到今天讲的自执行函数。用括号将整个函数包裹起来。
                函数只要是要调用它进行执行的，都必须加括号。此时，函数实际上等于函数的返回值或者执行效果，
                当然，有些没有返回值，但已经执行了函数体内的行为，就是说，加括号的，就代表将会执行函数体代码。
                不加括号的，都是把函数名称作为函数的指针，一个函数的名称就是这个函数的指针，此时不是得到函数的结果，
                因为不会运行函数体代码。它只是传递了函数体所在的地址位置，在需要的时候好找到函数体去执行。
                因为JavaScript里括弧()里面不能包含语句，所以在这个形式上，解析器在解析function关键字的时候，会将相应的代码解析成function表达式，而不是function声明。
            </p>
            <img src="./葡萄藤PPT_files/6023043-0686dcc17718d340.png" alt="">

        </section>

        <section class="future" style="top: 267px; display: none;" hidden="" aria-hidden="true">
            <h3>5.编码实战</h3>
        </section>

        <section class="future" style="top: 267px; display: none;" hidden="" aria-hidden="true">
            <h3>6.扩展思考</h3>
        </section>

        <section hidden="" aria-hidden="true" class="stack future" style="top: 0px; display: none;">
            <section style="top: 278.5px; display: none;">
                <h6>自执行函数有哪些用处？</h6>
            </section>
            <section class="future" aria-hidden="true" style="top: 37px; display: none;">
                <p>
                    javascript中没用私有作用域的概念，如果在多人开发的项目上，
                    你在全局或局部作用域中声明了一些变量，可能会被其他人不小心用同名的变量给覆盖掉，
                    根据javascript函数作用域链的特性，可以使用这种技术可以模仿一个私有作用域，
                    用匿名函数作为一个“容器”，“容器”内部可以访问外部的变量，而外部环境不能访问“容器”内部的变量，
                    所以( function(){…} )()内部定义的变量不会和外部的变量发生冲突，俗称“匿名包裹器”或“命名空间”。
                    JQuery使用的就是这种方法，将JQuery代码包裹在( function (window,undefined){…jquery代码…} (window)中，
                    在全局作用域中调用JQuery代码时，可以达到保护JQuery内部变量的作用。
                </p>
            </section>
        </section>
        <!--<section>-->
        <!--<p>立即执行函数有哪些用处？</p>-->
        <!--</section>-->
        <!--<section>-->
        <!--立即执行函数有很多用处，下面举一个例子：-->

        <!--在下面这个函数中，result是一个函数数组，希望达到的效果应该执行数组中的任何一个函数，得到的值都应该和该函数在数组中的索引值是一样的，但是实际情况是所有函数执行后得到的值都是10。之所以会这样是因为result数组取值的时候，是通过内部函数去返回外部变量i的值来取得的，由于内部函数会创造一个自己的作用域链，作用域链中存放的是i这个外部变量对象，这个变量对象对内部函数来说只有一个，for循环执行完成后的最后的值，即10；-->
        <!---->
        <!--</section>-->
        <!--<section>-->
        <!--<img src="http://upload-images.jianshu.io/upload_images/6023043-8d67142e6d48de83.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"-->
        <!--alt="">-->
        <!--<p>这个问题可以通过在给result数组取值外面加立即执行函数来解决，立即执行函数外面的()里面是可以传参的，下面这个用法中就是把外部变量i的值通过传参传给了num，然后把num的值又传给了result，这样最后函数数组result中每一个函数都是返回当时具体的值，即i当时的值，而不是i最后的值。-->

        <!--</p>-->
        <!--</section>-->
        <!--<section>-->
        <!--<img src="http://upload-images.jianshu.io/upload_images/6023043-95155c0973e90658.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"-->
        <!--alt="">-->
        <!--</section>-->
        <section hidden="" aria-hidden="true" class="future" style="top: 267px; display: none;">
            <h3>7.参考文献</h3>
        </section>
        <section hidden="" aria-hidden="true" class="future" style="top: 330px; display: none;">
            <p>参考一：<a href="http://www.cnblogs.com/TomXu/archive/2011/12/31/2289423.html" target="_blank">汤姆大叔的博客之立即调用的函数表达式</a>
            </p>
            <p>
                参考二：<a>Javascript高级程序设计</a>
            </p>
        </section>
        <section hidden="" aria-hidden="true" class="future" style="top: 330px; display: none;">
            <h3>8.更多讨论</h3>
        </section>
        <section hidden="" aria-hidden="true" class="future" style="top: 330px; display: none;">
            <h3>匿名函数和闭包的区别</h3>
        </section>
        <section hidden="" aria-hidden="true" class="future" style="top: 330px; display: none;">
            <h5>匿名函数：简单的来说就是没有名字的函数</h5>
            <h5>闭包的含义：闭包说白了就是函数的嵌套，内层的函数可以使用外层函数的所有变量，即使外层函数已经执行完毕（这点涉及JavaScript作用域链）</h5>
        </section>

        <section hidden="" aria-hidden="true" class="future" style="top: 330px; display: none;">
            <h4>鸣谢</h4>
            <p>感谢大家观看</p>
            <p>
                <small>BY :吴泽华</small>
            </p>
        </section>

    </div>
<div class="backgrounds"><div class="slide-background past" data-loaded="true" style="display: block;"></div><div class="slide-background present" data-loaded="true" style="display: block;"></div><div class="slide-background future" data-loaded="true" style="display: block;"></div><div class="slide-background future" data-loaded="true" style="display: block;"></div><div class="slide-background future" data-loaded="true" style="display: none;"></div><div class="slide-background stack future" data-loaded="true" style="display: none;"><div class="slide-background past" data-loaded="true" style="display: none;"></div><div class="slide-background past" data-loaded="true" style="display: none;"></div><div class="slide-background past" data-loaded="true" style="display: none;"></div><div class="slide-background past" data-loaded="true" style="display: none;"></div><div class="slide-background present" data-loaded="true" style="display: none;"></div></div><div class="slide-background future" data-loaded="true" style="display: none;"></div><div class="slide-background future" data-loaded="true" style="display: none;"></div><div class="slide-background future" data-loaded="true" style="display: none;"></div><div class="slide-background future" data-loaded="true" style="display: none;"></div><div class="slide-background future" data-loaded="true" style="display: none;"></div><div class="slide-background future" data-loaded="true" style="display: none;"></div><div class="slide-background future" data-loaded="true" style="display: none;"></div><div class="slide-background future" data-loaded="true" style="display: none;"></div><div class="slide-background stack future" data-loaded="true" style="display: none;"><div class="slide-background present" data-loaded="true" style="display: none;"></div><div class="slide-background future" data-loaded="true" style="display: none;"></div></div><div class="slide-background future" data-loaded="true" style="display: none;"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background future" style="display: none;"></div></div><div class="progress" style="display: block;"><span style="width: 54.64px;"></span></div><aside class="controls" style="display: block;"><button class="navigate-left enabled" aria-label="previous slide"></button><button class="navigate-right enabled" aria-label="next slide"></button><button class="navigate-up" aria-label="above slide"></button><button class="navigate-down" aria-label="below slide"></button></aside><div class="slide-number" style="display: none;"></div><div class="speaker-notes" data-prevent-swipe=""></div><div class="pause-overlay"></div><div id="aria-status-div" aria-live="polite" aria-atomic="true" style="position: absolute; height: 1px; width: 1px; overflow: hidden; clip: rect(1px 1px 1px 1px);">
            目录
            1.背景介绍
            2.知识剖析
            3.常见问题
            4.解决方案
            5.编码实战
            6.扩展思考
            7.参考文献
            8.更多讨论
        </div></div>

<script src="./葡萄藤PPT_files/head.min.js.下载"></script>
<script src="./葡萄藤PPT_files/reveal.js.下载"></script>

<script>
    // 以下为常见配置属性的默认值
    // {
    // 	controls: true, // 是否在右下角展示控制条
    // 	progress: true, // 是否显示演示的进度条
    // 	slideNumber: false, // 是否显示当前幻灯片的页数编号，也可以使用代码slideNumber: 'c / t' ，表示当前页/总页数。
    // 	history: false, // 是否将每个幻灯片改变加入到浏览器的历史记录中去
    // 	keyboard: true, // 是否启用键盘快捷键来导航
    // 	overview: true, // 是否启用幻灯片的概览模式，可使用"Esc"或"o"键来切换概览模式
    // 	center: true, // 是否将幻灯片垂直居中
    // 	touch: true, // 是否在触屏设备上启用触摸滑动切换
    // 	loop: false, // 是否循环演示
    // 	rtl: false, // 是否将演示的方向变成RTL，即从右往左
    // 	fragments: true, // 全局开启和关闭碎片。
    // 	autoSlide: 0, // 两个幻灯片之间自动切换的时间间隔（毫秒），当设置成 0 的时候则禁止自动切换，该值可以被幻灯片上的 ` data-autoslide` 属性覆盖
    // 	transition: 'default', // 切换过渡效果，有none/fade/slide/convex/concave/zoom
    // 	transitionSpeed: 'default', // 过渡速度，default/fast/slow
    // 	mouseWheel: true, //是否启用通过鼠标滚轮来切换幻灯片
    // }
    // 初始化幻灯片
    Reveal.initialize({
        history: true,
        dependencies: [
            {src: '../plugin/markdown/marked.js'},
            {src: '../plugin/markdown/markdown.js'},
            {src: '../plugin/notes/notes.js', async: true},
            {
                src: '../plugin/highlight/highlight.js', async: true, callback: function () {
                    hljs.initHighlightingOnLoad();
                }
            }
        ]
    });
</script>

</body></html>